import React, { memo } from 'react'
import type { FC } from 'react'

interface CategoryTabsProps {
  categories: {
    id: string
    name: string
  }[]
  activeCategory: string
  onSelectCategory: (categoryId: string) => void
}

const CategoryTabs: FC<CategoryTabsProps> = memo(({ 
  categories, 
  activeCategory, 
  onSelectCategory 
}) => {
  return (
    <div className="bg-white rounded-xl shadow-md p-2 mb-8 transition-all duration-500 hover:shadow-lg">
      <div className="flex flex-wrap justify-center gap-4">
        {categories.map((category) => (
          <button
            key={category.id}
            className={`category-tab px-6 py-3 rounded-lg transition-all duration-300 font-medium relative overflow-hidden ${ 
              activeCategory === category.id 
                ? 'active bg-primary text-white shadow-md' 
                : 'text-gray-600 hover:text-primary hover:bg-gray-50' 
            }`}
            onClick={() => onSelectCategory(category.id)}
          >
            {category.name}
            {/* 添加额外的动画元素 */}
            {activeCategory === category.id && (
              <span className="absolute inset-0 bg-white/20 animate-pulse"></span>
            )}
          </button>
        ))}
      </div>
    </div>
  )
})

CategoryTabs.displayName = 'CategoryTabs'

export default CategoryTabs